<template>
  <div class="description">
    <div class="description-label">{{ label }}：</div>
    <div class="description-value">
      <slot>
        {{ content }}
      </slot>
    </div>
    <a-tooltip :title="action.title" placement="top" v-for="action of actions" :key="action.title">
      <GpFontIcon :name="action.icon" class="description-action" @click="$emit('action', action)"></GpFontIcon>
    </a-tooltip>
  </div>
</template>
<script lang="ts" setup>
type Action = {
  title: string
  icon: string
}
defineOptions({
  name: 'Description',
  inheritAttrs: true
});
const { label, content, actions = [] } = defineProps<{
  label: string
  content?: string
  actions?: Array<Action>
}>();
defineEmits<{
  action: [action: Action]
}>()
</script>
<style lang="less" scoped>
@reference "../../assets/styles/tailwind.css";
.description {
  @apply flex flex-row items-center text-sm;

  &-label {
    @apply text-third !leading-[20px];
  }

  &-value {
    margin-right: 10px;
    @apply text-primary !leading-[20px];
  }

  &-action {
    margin-right: 6px;
    @apply text-sm cursor-pointer text-theme;
  }
}
</style>